<template>
	<div class="hot-recommend-box"  :class="hotRecommedClass">
		<div ref='top'>
			<header ref='header'>
				<div v-if='isTopHeader'>
					<ZxyhHeader v-if="$channel=='zxyh'" :title="this.$route.query.title" :isClose='false' :isSearch='true' @search='searchTrue'></ZxyhHeader>
					<div v-else>
						<p class="header-text">{{this.$route.query.title}}</p>
						<div class="search-btn-box">
							<Iconfont iconClass="sousuo begin-search-ru" @click.native="searchTrue" />
						</div>
					</div>
				</div>
				<div v-if="isSearch" class="search-wrap">
					<form @submit.prevent action="#">
						<input type="search" placeholder="请输入搜索关键字" v-model="searchKeyword" @keyup.13="handelSearch" ref="inputSearch">
					</form>
					<Iconfont iconClass="sousuo " />
					<div class="cancel" @click="cancel">取消</div>
				</div>
			</header>
			<div class="nav-tab" v-if="isNavTab">
				<ul class="area-parent-ul">
					<li class="parent-li" :class="parentCurNum == vIndex?'curParent':''" v-for='(v,vIndex) in menuArray' :key='vIndex' @click='clickParentMenu(v,vIndex)'> {{v.tagName}}</li>
				</ul>
				<div class="nav-sec">
					<!--v-if="childMenuShow"-->
					<ul class="children-ul" v-if="childMenuShow">
						<li class="children-li" :class="childCurNum == index?'curChild':''" v-for='(n, index) in childrenMenu' :key="index" @click='clickChildMenu(n,index)'>{{n.tagName}}</li>
					</ul>
				</div>

			</div>
		</div>
		<div class="mask" v-show="maskShow" @touchmove.prevent></div>
		<div class="contect-card" :class="[connectBox]" ref="commentBox">
			<div class="list-header" v-if="isListHeader">
				<div class="header-left">
					<div class="list-header-img head-stick"></div>
					<p class="header-title" v-text='conTitle'></p>
				</div>
			</div>
			<div class="contect-ul">
				<div class="no-video" v-if="isNoVideo"></div>
				<ul >
					<li v-for="(v,index) in conData" :key='index' @click="linkLookBackPage(v)">
						<div class="contect-img">
							<img :src="v.bgimg+'?x-oss-process=image/resize,m_fixed,h_199,w_350'" />
							<div class="audience">
								<i class="iconfont icon-user"></i>
								<div class="see" v-html="filtNum(v.pvSum)"></div>
							</div>
						</div>
						<p class="li-title">{{v.title}}</p>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import fun from '../../util/function'
	import ZxyhHeader from '@/components/zxyh/zxyhHeader'
	export default {
		components:{
		  ZxyhHeader
		},
		data() {
			return {
				isTop: false,
				isSearch: false, //搜索框
				isTopHeader: true,
				maskShow: false, //黑色覆盖层
				searchKeyword: '',
				page: 1, //页码
				tagsId: '', //请求的id
				busy: false, //打开滚动
				tipText: "", //底部文本提示
				scroll: '', //页面滚动高度
				menuArray: [],
				childrenMenu: [], //二级菜单
				childMenuShow: false,
				parentCurNum: 0, //一级菜单高亮
				childCurNum: 0, //二级菜单高亮
				conTitle: '',
				conData: [], //菜单数据,
				isNavTab: false,
				isListHeader: false,
				connectBox: '',
				isNoVideo: false,
				scrollSwitch:true,//滚动开关
				getPlatform:fun.getPlatform(), //app wx
			}
		},
		created() {
			this.$store.dispatch("hideNav");
			this.getMenuData()
			fun.dotNum("freChannel"+this.$route.query.id);
			if(isIos && this.getPlatform=='app' && this.$channel == 'zxyh'){		
				this.hotRecommedClass = 'recommend-box-zxyh-ios'
 			}
		},
		mounted() {
			this.$store.dispatch("hideNav");
			let _this =this
			//_this.$nextTick(() => {})
				_this.$refs.commentBox.onscroll = function() {
				let scrollTop = _this.$refs.commentBox.scrollTop; //197
				let windowHeight = _this.$refs.commentBox.clientHeight; //375
				let scrollHeight = _this.$refs.commentBox.scrollHeight; //572
				//console.log('scrollTop'+scrollTop+'windowHeight'+windowHeight+'scrollHeight'+scrollHeight)
				if(scrollTop + windowHeight >= scrollHeight&&_this.scrollSwitch){
					_this.page++;
					_this.scrollSwitch = false
					_this.getVideoArray(_this.page, _this.$route.query.id, _this.tagsId)
				}
			}
      
			
		},
		activated() {
			this.$store.dispatch("hideNav");
		},
		//		deactivated(){
		//		},
		methods: {
			linkLookBackPage(v) {
				this.$router.push(`/${this.$channel}/lookBack_particulars/${v.vid}`);
			},
			getVideoArray(page, typeId, tagsId) { //视频列表  page 页码    pageSize 一页的个数   typeId 专辑的id  gradeId 年纪的id   cityId城市的id   tagsId标签的id
				this.$http.get("/h5live/getTspdVideos?page=" + page + "&pageSize=10" + "&typeId=" + typeId + "&gradeId=&cityId=&tagsId=" + tagsId)
					.then(res => {
						if(res.data.code == "000000") {
							if(res.data.data.length || res.data.data.length==0) {
                                this.conData = [...this.conData,...res.data.data];
								this.scrollSwitch = true;
								console.log(this.conData)
								this.isNoVideo = false;
								if(res.data.data.length<10){
										this.scrollSwitch = false;
										if(this.page>1){
											fun.toastMessage("没有更多数据",1000)
										}
										
									}
							} else {
								if(this.conData.length==0 ){
									console.log('数组为空暂无数据')
								    this.isNoVideo = true;
								}
								
							}
						}
					})
					.catch(response => {
						console.log(response);
					});
			},
			getMenuData() { //标签数据
				this.$http.get("/h5live/getTspdTags?typeId=" + this.$route.query.id)
					.then(res => {
						if(res.data.code == "000000") {
							if(!res.data.data.length) { //无菜单
								this.connectBox = 'connect-big-box'
							} else {
								this.isNavTab = true;
								this.isListHeader = true
								this.menuArray = res.data.data;
								if(res.data.data[0].children.length > 0) { //第一个菜单有子集
									this.childMenuShow = true;
									this.tagsId = res.data.data[0].children[0].id;
									this.childrenMenu = res.data.data[0].children;
									this.conTitle = res.data.data[0].children[0].tagName;
									this.connectBox = 'connect-small-box'
								} else {
									this.tagsId = res.data.data[0].id;
									this.conTitle = res.data.data[0].tagName;
									this.childMenuShow = false;
									this.connectBox = 'connect-middle-box'
								}
							}
							this.getVideoArray(this.page, this.$route.query.id, this.tagsId)
							this.busy = false;//打开滑动
						}
					})
					.catch(response => {
						console.log(response);
					});
			},
			clickParentMenu(v, index) {
				this.page =1;
				this.conData = [] //格式化数组数据
				let childrenArrey = []
				let activeMenu = this.menuArray.filter(item => item.id == v.id);
				activeMenu.map(i => childrenArrey = i.children)
				if(childrenArrey.length) { //有子集
					this.childMenuShow = true
					this.childrenMenu = childrenArrey
					this.conTitle = this.childrenMenu[0].tagName
					this.tagsId = this.childrenMenu[0].id
					this.connectBox = 'connect-small-box'
				} else { //无子集
					this.childMenuShow = false
					this.tagsId = v.id
					this.connectBox = 'connect-middle-box'
				}
				this.childCurNum = 0
				this.parentCurNum = index
				this.getVideoArray(this.page, this.$route.query.id, this.tagsId)
			},
			clickChildMenu(v, index) {
				this.page =1;
				this.conData = []; //格式化数组数据
				this.childCurNum = index
				this.conTitle = this.childrenMenu[index].tagName
				this.tagsId = v.id
				this.getVideoArray(this.page, this.$route.query.id, this.tagsId)
			},
			handleScroll() {
				let scrollTop = this.$refs.connect.scrollTop;
				this.scroll = scrollTop;
			},
			// 观众数量 以万为单位
			filtNum(num) {
				if(!num) {
					num = 0
				} else if(num > 10000) {
					num = `${(num/10000).toFixed(1)}万`
				}
				return num
			},
			searchTrue() {
				this.isTopHeader = false
				this.isSearch = true;
				this.maskShow = true;
				this.searchKeyword = '';
				let _this = this
				setTimeout(() => { //不加延迟 控制台报错 报错'focus' of undefined
					_this.$refs.inputSearch.focus();
				}, 1000)
			},
			cancel() {
				this.isTopHeader = true
				this.isSearch = false
				this.maskShow = false
				this.searchKeyword = ''
			},
			handelSearch() {
				if(this.searchKeyword.length == 0) {
					fun.toastMessage('请输入搜索内容')
					return;
				}
				this.maskShow = false;
				this.isSearch = false;
				this.isTopHeader = true
				this.$refs.inputSearch.blur();
				this.$router.push({
					path: `/${this.$channel}/searchResult`,
					query: {
						content: this.searchKeyword,
						typeId: this.$route.query.id,
					}
				})
			},

		},
	}
</script>

<style scoped="scoped">
	.connect-big-box {
		width: 100vw;
		height: calc(100vh - 108px);
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		/*background: pink;*/
		/*background: silver;*/
	}
	
	.connect-small-box {
		width: 100vw;
		height: calc(100vh - 280px);
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		/*	background: saddlebrown;*/
	}
	
	.connect-middle-box {
		width: 100vw;
		height: calc(100vh - 172px);
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		/*background:darkmagenta;*/
	}
	
	.hot-recommend-box {
		width: 100vw;
		height: 100vh;
		/*	background: pink;*/
		overflow: hidden;
	}
	
	header {
		position: relative;
		background: white;
		top: 0;
		left: 0;
		/*background: pink;*/
	}
	
	header .header-text {
		width: 100%;
		height: 80px;
		font-size: 36px;
		text-align: center;
		line-height: 80px;
		color: #333333;
		/*background: sandybrown;*/
	}
	
	.search-btn-box {
		height: 80px;
		position: absolute;
		top: 0;
		right: 30px;
		display: flex;
		align-items: center;
	}
	
	.begin-search-ru {
		font-size: 40px;
	}
	
	.mask {
		width: 100vw;
		height: calc(100vh - 80px);
		position: fixed;
		top: 80px;
		background: rgba(0, 0, 0, 1);
		opacity: 0.4;
		z-index: 10;
	}
	
	.search-wrap {
		height: 80px;
		display: flex;
		padding-left: 20px;
		align-items: center;
		opacity: 1;
		/* margin-top: 15px;*/
	}
	
	.search-wrap.searchShow {
		opacity: 1;
	}
	
	.search-wrap i {
		position: absolute;
		left: 50px;
		font-size: 30px;
		color: #666;
		top: 26px;
	}
	
	.search-wrap input {
		width: 620px;
		height: 60px;
		background: rgba(246, 246, 246, 1);
		border-radius: 30px;
		background: #F6F6F6;
		box-sizing: border-box;
		padding-left: 80px;
		font-size: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	input::placeholder {
		padding: 0;
	}
	
	.search-wrap .cancel {
		margin-left: 30px;
		font-size: 28px;
		color: #333;
	}
	
	::-webkit-scrollbar {
		height: 0;
		width: 0;
		color: transparent;
		display: none;
	}
	
	.nav-table {
		width: 100%;
		background: white;
	}
	
	.area-parent-ul {
		width: 100%;
		white-space: nowrap;
		padding: 30px;
		box-shadow: 0px 6px 5px 0px rgba(177, 177, 177, 0.04);
		box-sizing: border-box;
		overflow-x: scroll;
		overflow-y: none;
	}
	
	.parent-li {
		display: inline;
		margin-right: 40px;
		font-size: 28px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		padding: 12px 0px;
	}
	
	.children-ul {
		width: 100%;
		white-space: nowrap;
		padding: 20px 30px;
		box-sizing: border-box;
		overflow-x: scroll;
		overflow-y: none;
		margin-top: 20px;
	}
	
	.children-li {
		display: inline;
		margin-right: 20px;
		padding: 12px 20px;
		border-radius: 20px;
		font-size: 26px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(131, 131, 131, 1);
	}
	
	.curParent {
		color: #E02D35;
	}
	
	.curChild {
		color: #E02D35;
		background: rgba(245, 245, 245, 1);
	}
	
	.contect-card {
		width: 100vw;
		/*background: white;*/
		border-radius: 12px;
		/*margin: 20px auto;*/
	}
	
	.list-header {
		width: 100vw;
		height: 55px;
		border-radius: 12px 12px 0 0;
		display: flex;
		align-items: center;
	}
	
	.header-left {
		display: flex;
		height: 55px;
		padding-top: 26px;
		margin-left: 25px;
		box-sizing: border-box;
	}
	
	.header-title {
		height: 28px;
		font-size: 28px;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin-left: 12px;
		align-self: center;
	}
	
	.head-stick {
		width: 4px;
		height: 32px;
		background: rgba(225, 45, 54, 1);
		border-radius: 2px;
		align-self: center;
	}
	
	.contect-ul {
		width: 100%;
		height: 100%;
		margin-top: 30px;
	}
	
	.contect-ul ul {
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 10px;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		touch-action: auto;
		-webkit-overflow-scrolling: touch;
		overflow-scrolling: touch;
	}
	
	.contect-ul ul li {
		width: 350px;
		position: relative;
		padding-bottom: 20px;
	}
	
	.contect-img {
		position: relative;
		height: 199px;
		margin-bottom: 20px;
	}
	
	.contect-img img {
		width: 350px;
		height: 199px;
		border-radius: 8px;
	}
	
	.audience {
		position: absolute;
		right: 0;
		bottom: 0;
		height: 30px;
		padding: 4px 8px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 8px 0px 8px 0px;
	}
	
	.iconfont.icon-user {
		color: #fff;
	}
	
	.li-title {
		max-width: 330px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 28px;
		font-weight: 400;
		color: #333333;
		margin-top: 18px;
		padding-left: 6px;
		margin-bottom: 10px;
	}
	
	.see {
		color: #fff;
		font-size: 16px;
		padding: 4px;
	}
	
	.no-video {
    width: 103px;
    height: 176px;
    margin: 0 auto;
		background: url(../../assets/images/no-video.png) no-repeat;
		background-size: 103px 176px;
    margin-top: 200px;
	}
	.recommend-box-zxyh-ios .connect-small-box{
     height: calc(100vh - 324px);
	}
	.recommend-box-zxyh-ios .connect-big-box{
      height: calc(100vh - 144px);
	}
	.recommend-box-zxyh-ios .connect-middle-box{
      height: calc(100vh - 232px);
	}
	.recommend-box-zxyh-ios .search-wrap{
     margin-top: 60px;
	}
	.recommend-box-zxyh-ios .mask {
		height: calc(100vh - 140px);
		top: 140px;
		z-index: 10;
	}
</style>